导航栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导航</title>
    <style>
        ul{
            list-style-type: none;
            /*移除列表标记*/
            margin: 0;
            padding: 0;
            width: 200px;
            background-color: skyblue;
            position: fixed;
            height: 100%;
            overflow: auto;
            /*如果导航栏过多可以滚动*/
        }
        li a{
            text-decoration: none;
            padding: 8px 16px;
            display: block;
            /*显示块元素的链接，整体变为可点击，不只是文本，允许指定宽度*/
        }
        li a:hover{
            background-color: deeppink;
            color: white;
        }
        /*li a:hover:not(.active){*/
            /*background-color: darkgrey;*/
            /*color: white;*/
        /*}*/
        li a.active{
            background-color: deepskyblue;
            color: white;
        }
        .dropdown{
            display: inline-block;
            position: relative;
        }
        .dropbtn{
            color: black;
            text-decoration: none;
            border: none;
            cursor: pointer;
        }
        .dropdown-content{
            display: none;
            position: absolute;
            background-color: darkgrey;
            min-width: 10px;
        }
        .dropdown-content a{
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
        }
        .dropdown-content a:hover {
            background-color: #f1f1f1
        }
        .dropdown:hover .dropdown-content {
            display: block;
        }
        .dropdown:hover .dropbtn {
            background-color: #3e8e41;
        }
    </style>
</head>
<body>
<ul>
    <li><a  class="active" href="login.html">主页</a></li>
    <div class="dropdown"></div>
    <li><a href="login.html" class="dropbtn">新闻</a></li></li>
        <div class="dropdown-content">
            <a href="login.html">国内新闻</a>
            <a href="login.html">国外新闻</a>
        </div>
    <li><a href="login.html">联系</a></li>
    <li><a href="login.html">关于</a></li>
</ul>
</body>
</html>